<template>
<div>
  <div>
    <a-button v-on:click="gotoAdd()">添加</a-button>
  </div>
  <div>
    <a-table
    :columns="columns"
    :row-key="record => record.command"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template slot="comamnd" slot-scope="command"> {{ command }} </template>
    <template slot="content" slot-scope="content">
      <div v-html="content"></div>
    </template>
    <span slot="action" slot-scope="action">
        <a @click="gotoRoute(action)">Edit</a>  
        <a-divider type="vertical" />   
        <a @click="showDelete(action)">Delete</a>
    </span>
  </a-table>
  </div>
  <div>
    <a-modal
      title="确认要删除吗？"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>删除后，不能恢复，确定要删除吗？</p>
    </a-modal>
  </div>
</div>
</template>
<script>
import axios from 'axios';
var config = {
  headers: {
    "Access-Control-Allow-Origin": "*"
  },
};
const queryData = params => {
  return axios.get('http://portal.btmxpro.com:8888/bot/server/command', { params: params },config);
};
const deleteData = params =>{
  return axios.get('http://portal.btmxpro.com:8888/bot/server/delete',{ params: params } , config)
}
const columns = [
  {
    title: 'command',
    dataIndex: 'command',
    sorter: true,
    width: '20%',
    scopedSlots: { customRender: 'command' },
  },
  {
    title: 'tips',
    dataIndex: 'tips',
  },
  {
    title: 'content',
    dataIndex: 'content',
    width: '20%',
    scopedSlots: { customRender: 'content' },
  },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 200,
    scopedSlots: { customRender: 'action' },
  }
];

export default {
  name: 'CommandList',
  data() {
    return {
      data: [],
      pagination: false,
      loading: false,
      columns,
      visible: false,
      confirmLoading: false,
      deleteId: 0,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    gotoAdd(){
      this.$router.push({
        path: '/command/edit',
      })
    },
    showDelete(action){
      console.log(action)
      this.deleteId = action.id
      this.visible = true
    },
    handleCancel() {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    handleOk(params ={}) {
      this.ModalText = '删除中，请稍等';
      this.confirmLoading = true;
      //执行删除
      deleteData({id:this.deleteId,...params});
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
        this.$message.info("删除成功");
        this.fetch({});
      }, 2000);
    },
    gotoRoute(action){
      console.log(action)
      this.$router.push({
        path: '/command/edit',
        query: {
          id: action.id
        }
      })
    },
    gotoUpstream(action){
      console.log(action)
      this.$router.push({
        path: '/upstream',
        query: {
          upstreamName: action.host
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      // const pager = { ...this.pagination };
      // pager.current = pagination.current;
      // this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        // page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      queryData({
        results: 10,
        ...params,
      }).then(({ data }) => {
        console.log(data)
        // const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        // pagination.total = 200;
        this.loading = false;
        this.data = data.commands;
        // this.pagination = pagination;
      });
    },
  },
};
</script>
